<template>
  <div class="el-sidebar">
    <!-- 2默认菜单项 -->
    <el-menu
      :default-active="$route ? $route.path : '2'"
      :router="true"
      class="el-menu-vertical-hr"
      :collapse="isCollapse"
    >
      <MenuTree :menuList="data" @select="onSelect"></MenuTree>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import MenuTree from './MenuTree.vue'

const emit = defineEmits(['update:modelValue', 'select'])
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  collapse: {
    type: Boolean,
    default: false,
  },
})
let isCollapse = ref(props.collapse)
/**
 * 选择当前菜单
 */
const onSelect = menu => {
  emit('update:modelValue', menu)
}
// 折叠项
watch(
  () => props.collapse,
  (newValue, oldValue) => {
    isCollapse.value = newValue
  }
)
</script>
